/**
 * 选择优惠券
 * @date    2021-05-29 15:09:39
 * @Author  likai
 */
import React,{useEffect,useState,useRef} from 'react'
import {Input,Form,Drawer} from 'antd'
import Table from '@modules/table2'
import SearchForm from '@modules/search'
import GroupBtn from '@modules/groupBtn'
import css from './index.scss'

const initialValues = {couponName:''}
export default props=>{
  let {type='checkbox',onCancel,rowKey='goodsId',onOk,url='/api/coupon/listCouponForPage'} = props
  let [form] = Form.useForm()
  let [params,setParams] = useState(initialValues)
  let [selectedRowKeys,setKeys] = useState([])
  let [rows,setRows] = useState([])
  useEffect(()=>{
    setKeys([])
    setRows([])
  },[])
  const onFinish = ()=>{
    onOk(rows)
    onCancel()
  }
  const onSearch = ()=>{
    form.validateFields()
    .then(res=>{
      res.productName = res.name
      setParams({...res})
    })
  }
  const onReset = ()=>{
    form.setFieldsValue(initialValues)
    setParams({...initialValues})
  }
  const onSelectChange = (selectedRowKeys,row) => {
    setKeys([...selectedRowKeys])
    setRows([...row])
  };
  const columns=[
    { title:'序号',render:(text,r,i)=>(i+1)},
    { title:'优惠券名称',key: 'qualification',},
    { title:'库存',key: 'goodsName',},
    { title:'状态',width:120, key: 'price'},
    { title:'有效期',width:120, key: 'stock'}
  ]
  return <Drawer title={'选择优惠券'} visible={true} width={'80%'} onClose={onCancel} extra={<GroupBtn btns={[
    {text:'确定',onClick:onFinish},
    {text:'取消',onClick:onCancel},
  ]} />}>
    <SearchForm form={form}  initialValues={initialValues} groupBtns={[
      {text:'查询',onClick:onSearch},
      {text:'清空',onClick:onReset},
    ]}>
      <Form.Item labelCol={{span:8}} name="couponName" label="优惠券名称">
        <Input placeholder='请选择优惠券名称' />
      </Form.Item>
    </SearchForm>
    <div className={css.table}>
      <Table 
        url={url} 
        rowKey={rowKey} 
        scroll={{ y: 440 }} 
        columns={columns} 
        params={params} 
        rowSelection={{
          type:type,
          selectedRowKeys,
          onChange:onSelectChange
        }}
      />
    </div>
  </Drawer>
}
